<template>
    <div class="container">
        <div class="demo">
            <div class="demo-title">设置参数</div>
            <div class="demo-params">
                <div class="item">
                    <div class="l">大小</div>
                    <div class="r">
                        <input type="number" v-model.number="size" placeholder="大小" />
                    </div>
                </div>
                <div class="item">
                    <div class="l">进度</div>
                    <div class="r">
                        <input type="number" v-model.number="progress" placeholder="进度" />
                    </div>
                </div>
                <div class="item">
                    <div class="l">进度条（轨道）宽度</div>
                    <div class="r">
                        <input type="number" v-model.number="borderWidth" placeholder="进度条（轨道）宽度" />
                    </div>
                </div>
                <div class="item">
                    <div class="l">进度条颜色</div>
                    <div class="r">
                        <input type="color" v-model="borderColor">
                    </div>
                </div>
                <div class="item">
                    <div class="l">轨道颜色</div>
                    <div class="r">
                        <input type="color" v-model="layerColor">
                    </div>
                </div>
                <div class="item">
                    <div class="l">背景色</div>
                    <div class="r">
                        <input type="color" v-model="bgColor">
                    </div>
                </div>
            </div>
            <div class="demo-title">Slots</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>名称</td>
                        <td>说明</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>default</td>
                        <td>自定义内容</td>
                    </tr>
                </tbody>
            </table>
            <brsProgress :progress="progress" :size="size" :borderWidth="borderWidth" :bgColor="bgColor" :layerColor="layerColor" :borderColor="borderColor">
                <div class="box">{{progress}}%</div>
            </brsProgress>
        </div>
    </div>
</template>

<script>
import brsProgress from "@/components/progress"
export default {
    name: 'demo-progress',
    components: { brsProgress },
    data(){
        return {
            progress: 0,
            size: 150,
            borderColor: '#007ACC',
            layerColor: '#FFFFFF',
            bgColor: 'transparent',
            borderWidth: 10
        }
    },
}
</script>

<style lang="less" scoped>
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
    }
</style>